﻿@page "/modalcarousel"

<h3>Modal Carousel</h3>
<div class="docs-example">
    <BSButton Color="Color.Primary" @onclick="@(() => CraouselDemo.Show())">Launch demo modal</BSButton>
    <BSModal @ref="CraouselDemo">
        <BSModalHeader OnClick="@(() => CraouselDemo.Hide())">Modal title</BSModalHeader>
        <BSModalBody>

            <BSCarousel NumberOfItems="@items.Count" ActiveIndexChangedEvent="@indexChanged">
                <BSCarouselIndicators />
                <div class="carousel-inner">
                    @for (int i = 0; i < items.Count; i++)
                    {
                        <BSCarouselItem src="@items[i].Source" alt="@items[i].Alt" />
                    }
                </div>
                <BSCarouselControl CarouselDirection="CarouselDirection.Previous" />
                <BSCarouselControl CarouselDirection="CarouselDirection.Next" />
            </BSCarousel>

        </BSModalBody>
        <BSModalFooter>
            <BSButton Color="Color.Secondary" @onclick="@(() => CraouselDemo.Hide())">Close</BSButton>
        </BSModalFooter>
    </BSModal>
</div>


@code {
    BSModal CraouselDemo { get; set; }

    List<Item> items = new List<Item>
    {
        new Item {
            Source = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1631dfd09f0%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1631dfd09f0%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
            Alt ="First Slide",
            Caption = "Slide 1",
            Header = "Slide 1 Header",
            ActionLink = "https://chanan.github.io/BlazorStrap/",
            ActionLinkTarget = "_blank"
        },
        new Item {
            Source = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1631dfd09f1%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1631dfd09f1%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
            Alt ="Second Slide",
            Caption = "Slide 2",
            Header = "Slide 2 Header",
            ActionLink = "https://chanan.github.io/BlazorStrap/",
            ActionLinkTarget = "_blank"
        },
        new Item {
            Source = "data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1631dfd09f2%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1631dfd09f2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E",
            Alt ="Third Slide",
            Caption = "Slide 3",
            Header = "Slide 3 Header",
            ActionLink = "https://chanan.github.io/BlazorStrap/",
            ActionLinkTarget = "_blank"
        }
    };


    private void indexChanged(int index)
    {
        Console.WriteLine("Index Changed: " + index);
    }

    class Item
    {
        public string Source { get; set; }
        public string Alt { get; set; }
        public string Caption { get; set; }
        public string Header { get; set; }
        public string ActionLink { get; set; }
        public string ActionLinkTarget { get; set; }
    }
}
